<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <h3>考试报名</h3>
      </div>
      <el-table :data="examRegData.examList">
        <el-table-column label="报考科目" min-width="120px" align="center">
          <template slot-scope="scope">
            <i class="el-icon-reading" />
            {{ scope.row.examName }}
          </template>
        </el-table-column>
        <el-table-column label="考试时间" min-width="120px" align="center">
          <template slot-scope="scope">
            <i class="el-icon-date" />
            {{ scope.row.examDate }}
          </template>
        </el-table-column>
        <el-table-column label="报名时间" min-width="120px" align="center">
          <template slot-scope="scope">
            <i class="el-icon-date" />
            {{ scope.row.regDate }}
          </template>
        </el-table-column>
        <el-table-column label="报考人数" min-width="80px" align="center">
          <template slot-scope="scope">
            <el-tag v-if="countRegStatus(scope) === 0">
              {{ scope.row.examRegNum }} / {{ scope.row.examRegAllNum }}
            </el-tag>
            <el-tag v-else-if="countRegStatus(scope) === 1" type="success">
              {{ scope.row.examRegNum }} / {{ scope.row.examRegAllNum }}
            </el-tag>
            <el-tag v-else-if="countRegStatus(scope) === 2" type="danger">
              {{ scope.row.examRegNum }} / {{ scope.row.examRegAllNum }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="报名状态" fixed="right" min-width="120 px" align="center">
          <template slot-scope="scope">
            <el-button v-if="countHadRegStatus(scope) === 0" type="primary" @click="changeRegStatus">
              未报名
            </el-button>
            <el-button v-else-if="countHadRegStatus(scope) === 1" type="success" @click="changeRegStatus">
              成功
            </el-button>
            <el-button v-else-if="countHadRegStatus(scope) === 2" type="danger" disabled @click="changeRegStatus">
              人数已满
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="报名须知" :visible.sync="dialogExamNotice" center width="80%">
      <h1 slot="title">报名须知</h1>
      <h3>一、考生须知</h3>
      <div v-html="examStudentNote" />
      <h3>二、考试内容须知</h3>
      <div v-html="examInfoNote" />
      <h3>三、疫情防控须知</h3>
      <div v-html="examOtherNote" />
      <el-row slot="footer">
        <el-checkbox v-model="dialogExamchecked">我已阅读并自觉遵守考试纪律</el-checkbox>
        <el-button type="primary" size="small" style="margin-left: 20px">确认报名</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

const examContent = require('@/assets/json/examStatic.json')

export default {
  name: 'ExamRegister',
  data() {
    return {
      dialogExamNotice: false,
      examStudentNote: examContent.examStudentNote,
      examInfoNote: '',
      examOtherNote: examContent.examOtherNote,
      examRegData: {
        examList: [
          { examName: '2021年数学考试', examDate: '2020/04/28 8:00-11:30', regDate: '2020/04/28 8:00-11:30', examRegNum: 25, examRegAllNum: 50, examHadRegStat: false },
          { examName: '2021年语文考试', examDate: '2020/04/28 8:00-11:30', regDate: '2020/04/28 8:00-11:30', examRegNum: 50, examRegAllNum: 50, examHadRegStat: false },
          { examName: '2021年英语考试', examDate: '2020/04/28 8:00-11:30', regDate: '2020/04/28 8:00-11:30', examRegNum: 48, examRegAllNum: 50, examHadRegStat: false },
          { examName: '2021年物理考试', examDate: '2020/04/28 8:00-11:30', regDate: '2020/04/28 8:00-11:30', examRegNum: 50, examRegAllNum: 50, examHadRegStat: false },
          { examName: '2021年化学考试', examDate: '2020/04/28 8:00-11:30', regDate: '2020/04/28 8:00-11:30', examRegNum: 0, examRegAllNum: 50, examHadRegStat: false }
        ]
      }
    }
  },
  methods: {
    countRegStatus(scope) {
      // 0: 人数未满 1: 满一半 2: 人数已满无法报名
      const countNum = scope.row.examRegNum / scope.row.examRegAllNum
      if (countNum < 0.5) {
        return 0
      } else if (countNum >= 1) {
        return 2
      } else {
        return 1
      }
    },
    countHadRegStatus(scope) {
      const maxRegStatus = this.countRegStatus(scope)
      // 0: 未报名 1: 成功报名 2: 人数已满无法报名
      if (scope.row.examHadRegStat === false && maxRegStatus !== 2) {
        return 0
      } else if (scope.row.examHadRegStat !== false && maxRegStatus !== 2) {
        return 1
      } else {
        return 2
      }
    },
    changeRegStatus() {
      this.dialogExamNotice = true
    }
  }
}
</script>

<style scoped>

</style>
